---
interface Props {
  disableLink?: boolean
  combatId: string
  fighter1: {
    id: string
    name: string
    percentage: number
  }
  fighter2: {
    id: string
    name: string
    percentage: number
  }
  overlay?: boolean
  totalVotes?: number
}

const {
  disableLink = false,
  combatId,
  fighter1,
  fighter2,
  overlay = false,
  totalVotes,
} = Astro.props
---

<div
  id={`prediction-bar-${combatId}`}
  class={[
    overlay
      ? 'absolute left-1/2 -translate-x-1/2 bottom-0 z-30 w-full flex justify-center'
      : 'w-full flex flex-col items-center',
    'pointer-events-none opacity-0 flex-col justify-center items-center',
  ].join(' ')}
>
  <!-- Barra clickeable -->
  <a
    href="/porra"
    class:list={[
      'group pointer-events-auto block w-full max-w-3xl transition-transform duration-300 hover:scale-105',
      disableLink ? 'pointer-events-none' : '',
    ]}
  >
    <div
      class="relative flex h-12 w-full overflow-hidden rounded-full border-2 border-white/20 bg-white/10 shadow-2xl md:h-14"
    >
      <!-- Barra del primer combatiente -->
      <div
        data-fighter-id={fighter1.id}
        class="prediction-bar-fighter-1 flex h-full flex-col items-center justify-center bg-gradient-to-r from-pink-500 via-pink-400 to-pink-300 font-bold text-white transition-all duration-300"
      >
        <span
          class="text-[10px] font-extralight uppercase leading-none tracking-wider drop-shadow-md sm:text-xs md:text-sm"
          >{fighter1.name}</span
        >
        <span
          class="prediction-bar-percentage mt-1 text-xs leading-none drop-shadow-md md:text-base"
          >{fighter1.percentage}%</span
        >
      </div>
      <!-- Separador diagonal -->
      <div class="-ml-2 h-full w-2 skew-x-12 bg-pink-300 shadow-lg"></div>
      <div class="-mr-2 h-full w-2 skew-x-12 bg-blue-300 shadow-lg"></div>
      <!-- Barra del segundo combatiente -->
      <div
        data-fighter-id={fighter2.id}
        class="prediction-bar-fighter-2 flex h-full flex-col items-center justify-center bg-gradient-to-l from-sky-400 via-sky-300 to-blue-300 font-bold text-white transition-all duration-300"
      >
        <span
          class="text-[10px] font-extralight uppercase leading-none tracking-wider drop-shadow-md sm:text-xs md:text-sm"
          >{fighter2.name}</span
        >
        <span class="prediction-bar-percentage text-xs leading-none drop-shadow-md md:text-base"
          >{fighter2.percentage}%</span
        >
      </div>
    </div>
  </a>

  <!-- Texto con el número de votaciones (fuera del área clickeable) -->
  {
    totalVotes && (
      <p class="animate-delay-300 mt-3 text-center text-xs lowercase text-white/70 opacity-0 drop-shadow-md">
        Basado en{' '}
        <span class="prediction-bar-votes font-semibold text-white">
          {totalVotes.toLocaleString()}
        </span>{' '}
        votaciones de usuarios
      </p>
    )
  }
</div>

<script>
  // listen an event to update the prediction bar
  document.addEventListener('update-prediction-bar', (event) => {
    const {
      id,
      data: { predictions, total_votes: totalVotes },
    } = (event as CustomEvent).detail
    const predictionBar = document.getElementById(`prediction-bar-${id}`)

    if (predictionBar) {
      const $votes = predictionBar.querySelector('.prediction-bar-votes')
      const $votesParent = $votes?.parentNode as HTMLElement

      if ($votes && $votesParent) {
        $votes.textContent = totalVotes.toLocaleString()
        $votesParent.classList.add('opacity-0')
        $votesParent.classList.add('animate-fade-in')
      }

      predictions.map((prediction: { fighter_id: string; percentage: number; votes: number }) => {
        const $fighter = predictionBar.querySelector(
          `[data-fighter-id="${prediction.fighter_id}"]`,
        ) as HTMLElement

        if ($fighter) {
          const $percentage = $fighter.querySelector('.prediction-bar-percentage') as HTMLElement

          if ($percentage) {
            $percentage.textContent = `${prediction.percentage}%`
            $fighter.style.width = `${prediction.percentage}%`
          }
        }
      })

      predictionBar.classList.remove('opacity-0')
      predictionBar.classList.add('animate-fade-in')
    }
  })
</script>
